<template>
	<view class="nav-bar-box">
		<view class="left-box" @click="leftIcon">
			<image class="back-image" src="../../static/images/icon/back.png" mode="widthFix"></image>
		</view>
		<view class="content-box">
			{{title}}
		</view>
		<view class="right-box">
			<slot name="customRight">
				<uni-icons v-if="rightIcon" color="#fff" :type="rightIcon" size="32"></uni-icons>
				<image v-if="rightIcon" @click="rightIconClick" class="back-image" :src="'../../static/images/icon/' + rightIcon + '.png'"
				 mode="widthFix"></image>
			</slot>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		props: {
			title: {
				type: String,
				default: () => ''
			},
			rightIcon: {
				type: String,
				default: () => ''
			}
		},
		components: {
			uniIcons
		},
		data() {
			return {

			}
		},
		methods: {
			leftIcon() {
				this.$emit('_back');
			},
			rightIconClick() {
				if (!this.rightIcon) return;
				this.$emit('rightClick');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar-box {
		height: 88rpx;
		color: #fff;
		display: flex;
		align-items: center;
		font-size: 36rpx;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;

		.left-box {
			position: absolute;
			left: 30rpx;
		}

		.content-box {
			width: 100%;
			text-align: center;
		}

		.right-box {
			position: absolute;
			right: 30rpx;
		}

		.back-image {
			width: 32rpx;
			height: 30rpx;
		}
	}
</style>
